<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游记预览</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <link href="css/public.css" rel="stylesheet">
    <link href="css/travelogueView.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/public.js"></script>
</head>
<body>
  <div id="app">
    <public @user-loaded="handleUserLoaded" ref="loginComponent">
      <template v-slot:header-ul>
        <ul class="header-ul">
          <li style="width: 60px;">首页</li>
          <li style="width: 74px;">目的地</li>
          <li style="width: 88px;">旅游攻略</li>
          <li style="width: 70px;">去旅行</li>
          <li style="width: 54px">社区</li>
          <li style="width: 74px">找搭子</li>
        </ul>
      </template>
      <template v-slot:nologin>
        <div class="header-login">
          <a href="javascript:void(0)"><img src="images/qq.png" title="QQ登录"/></a>
          <a href="javascript:void(0)"><img src="images/wx.png" title="微信登录"/></a>
          <a class="lar" href="lar.html" style="font-weight: bold;">登录</a>
          <span>|</span>
          <a class="lar" href="lar.html" style="font-weight: bold;">注册</a>
        </div>
      </template>
      <template v-slot:logined="user">
        <div class="header-login">
          <a>打卡</a>
          <a class="msg">消息<i class="bi bi-caret-down-fill"></i></a>
          <a class="per"><img :src="user.avatar"><i class="bi bi-caret-down-fill"></i></a>
        </div>
        <!--消息下拉菜单-->
        <div class="tips msg-tips">
          <ul>
            <li>私信</li>
            <li>系统通知</li>
            <li>回复消息</li>
          </ul>
        </div>
        <!--用户下拉菜单-->
        <div class="tips user-tips">
          <ul>
            <li><i class="bi bi-pencil-square"></i>写游记</li>
            <li><i class="bi bi-question-diamond"></i>我的问答</li>
            <li><i class="bi bi-star-fill"></i>我的收藏</li>
            <li><i class="bi bi-gear"></i>设置</li>
            <li @click="loginout"><i class="bi bi-box-arrow-left"></i>退出</li>
          </ul>
        </div>
      </template>
      <template v-slot:container>
        <div class="container-img">
          <img :src="travelogue.backImg">
          <div class="container-relevant">
            <h2>{{travelogue.title}}</h2>
          </div>
        </div>
        <div class="container-introduce">
          <div class="introduce-left">
            <div><img :src="user.avatar"></div>
            <div class="introduce-left-people">
              <ul>
                <li>{{user.username}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="container-view">
          <div class="view-con">
            <div class="view-con-content">
              <div v-for="(item,index) in sortedContent" :key="index">
                <div v-if="item.type === 'paragraph' " class="content-para">
                  <h2>
                    <span>{{item.value}}</span>
                  </h2>
                  <div></div>
                </div>
                <div v-if="item.type === 'text' " class="content-text">
                  <p>{{item.value}}</p>
                </div>
                <div v-if="item.type === 'image' " class="content-img">
                  <img :src="item.value"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </public>

  </div>

  <script>
    const token = localStorage.getItem('token');
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    var v = new Vue({
      el : "#app",
      data : {
        user: {},
        travelogue: {},
        content: {
          images: [],
          paragraphs: [],
          texts:[]
        },
        sortedContents: []
      },
      created() {
        // 获取 URL 的查询部分
        const queryString = window.location.search;
        // 解析查询部分
        const params = new URLSearchParams(queryString);
        // 获取 travelogueId 参数的值
        const tid = params.get("travelogueId");
        if (tid != null && tid != 0){
          axios.get("/travelogues/getOne?travelogueId="+tid).then(res =>{
            if (res.data.code == 200){
              this.travelogue = res.data.data;
              axios.get("/contents/getAll?travelogueId="+tid).then(res =>{
                if (res.data.code == 200){
                  let list = res.data.data;
                  list.forEach( item => {
                    if (item.contentType == 'image'){
                      this.content.images.push({
                        id: item.contentId,
                        type: item.contentType,
                        value: item.contentValue,
                        index: item.contentIndex,
                      })
                    }else if(item.contentType == 'text'){
                      this.content.texts.push({
                        id: item.contentId,
                        type: item.contentType,
                        value: item.contentValue,
                        index: item.contentIndex
                      });
                    }else{
                      this.content.paragraphs.push({
                        id: item.contentId,
                        type: item.contentType,
                        value: item.contentValue,
                        index: item.contentIndex
                      })
                    }
                  })
                };
              })
            }
          })
        }
      },
      computed: {
        sortedContent() {
          // 合并三个部分并按index排序
          this.sortedContents = [...this.content.images, ...this.content.paragraphs,...this.content.texts]
                  .sort((a, b) => a.index - b.index);
          return this.sortedContents;
        }

      },
      methods : {
        handleUserLoaded(user) {
          if (user == null){
            this.$message({
              type: 'warning',
              message: '用户未登录，请先登录'
            })
            location.href = 'lar.html';
            return
          }
          this.user = user;
        },
        formatIndex(index) {
          return String(index).padStart(2, '0');
        },
        loginout(){
          axios.get("/users/loginout").then(res =>{
            this.$refs.loginComponent.user = null;
            this.user = {};
            location.href = 'index.html'
          })
        }
      }
    })



  </script>

</body>
</html>